import React, { useRef, useEffect } from 'react';
import { Table } from 'antd';
import { columns, dataSource } from './config';

const Index = () => {
  const table = useRef(null);
  useEffect(() => {
    const current_table = table.current;
    const table_ = current_table.querySelector('table');
    let i = 0;
    setInterval(() => {
      if (i <= -1500 + current_table.clientWidth) {
        i = 0;
      }
      table_.style.transform = `translateX(${i + 'px'} )`;
      i--;
    }, 5);
  }, []);
  const tableProps = {
    columns,
    dataSource,
    rowKey: 'name',
    scroll: { x: 1500 },
    ref: table,
  };
  return <Table {...tableProps}></Table>;
};

export default Index;
